<template>
  <div class="containt">
    <div class="back_box">
      <div class="back_btn">
        <img
          v-show="true"
          @click="backHandler"
          src="../../../assets/back.png"
        />
      </div>
    </div>
    <div style="margin-top: 50px; margin-left: 30px">
      <div
        style="
          color: #222222;
          font-size: 17px;
          font-weight: 500;
          line-height: 24px;
        "
      >
        当前中军值
      </div>
      <div
        style="
          color: #ff6005;
          font-size: 30px;
          font-weight: 400;
          line-height: 40px;
        "
      >
        {{ score }}
      </div>
      <div
        style="
          color: #666666;
          font-size: 13px;
          font-weight: 400;
          line-height: 30px;
        "
        @click="toList"
      >
        中军值兑换记录＞
      </div>
    </div>
    <div
      style="
        background-color: #fff;
        border-radius: 16px 16px 0px 0px;
        padding: 0px 20px;
      "
    >
      <div
        style="
          line-height: 40px;
          font-weight: 600;
          margin-top: 10px;
          color: #222222;
          font-size: 15px;
        "
      >
        请输入要兑换股票的中军值
      </div>
      <van-cell-group inset style="margin: 0 0px !important">
        <van-field
          v-model="formData.score"
          @blur="moneyHandler"
          type="digit"
          placeholder="请输入兑换数量"
          style="padding: 10px 10"
        />
      </van-cell-group>
      <div
        style="
          font-size: 13px;
          color: #222222;
          line-height: 30px;
          font-weight: bold;
          margin-bottom: 30px;
        "
      >
        {{ total ? "可" : "" }}兑换{{ total ? total : "" }}等值股票
      </div>
      <div
        style="
          font-size: 13px;
          color: #999999;
          line-height: 30px;
          font-weight: bold;
        "
      >
        兑换规则:
      </div>
      <div
        style="
          font-size: 12px;
          color: #999999;
          line-height: 30px;
          font-weight: bold;
        "
      >
        1、中军值兑换股票比例为1:1.2
      </div>

      <div
        style="
          width: 90vw;
          line-height: 45px;
          text-align: center;
          color: #fff;
          background: #fe4b20;
          margin: auto;
          margin-top: 50px;
          border-radius: 4px;
        "
        @click="submit"
      >
        兑换
      </div>
    </div>
    <van-popup v-model="show">
      <div class="popup">
        <div
          style="
            color: #000000;
            line-height: 80px;
            font-weight: 600;
            font-size: 17px;
          "
        >
          中军值兑换
        </div>
        <div style="color: #737373; font-size: 13px">
          亲，你已兑换{{ total }}等值股票！
        </div>
        <div
          style="
            width: 150px;
            line-height: 40px;
            color: rgb(254, 75, 32);
            text-align: center;
            border: 1px solid rgb(254, 75, 32);
            border-radius: 4px;
            margin-top: 20px;
          "
          @click="backHandler"
        >
          我知道了
        </div>
      </div>
    </van-popup>
  </div>
</template>
    
    <script>
import navCom from "@/component/nav";
import { unionAdd, scoreStock, getuserInfo } from "@/api/api.js";
import { Field, CellGroup, Picker, Icon, Toast } from "vant";
export default {
  components: {
    navCom,
  },
  data() {
    return {
      dataInfo: {},
      show: false,
      value: "",
      columns: ["3000", "4000", "5000", "6000", "7000", "8000", "9000"],
      formData: {
        score: "",
      },
      score: 0.0,
      total: "",
    };
  },
  created() {
    // let score = this.$route.params.score;
    // this.score=score;
    this.getuserInfo();
  },
  methods: {
    toList() {
      this.$router.push({ name: "balanceToOthersRecord", params: { type: 8 } });
    },
    getuserInfo() {
      getuserInfo().then((res) => {
        console.log("getuserInfo", res);
        if (res.data.code == 1) {
          this.score = res.data.data.score;
        } 
      });
    },
    moneyHandler(e) {
      console.log(e.target.value);
      this.total = e.target.value * 1.2;
    },
    showPipupClick() {
      console.log("showPipupClick");
      this.showPipup = true;
    },
    onConfirm(e) {
      console.log("onConfirm", e);
      this.formData.money = e;
      this.showPipup = false;
    },
    goPage(type) {
      if (type == 1) {
        this.$router.push("/toFuture");
      }
      if (type == 2) {
        this.$router.push("/togetherInvitatio");
      }
    },
    //返回
    backHandler() {
      this.show = false;
      this.$router.go(-1);
      // if (weixin.isAndroid()) {
      //   window.JS_TROOPS.goBack();
      // } else {
      //   this.$router.go(-1);
      // }
    },
    // 初始化数据
    submit() {
      scoreStock(this.formData)
        .then((res) => {
          console.log("unionAdd", res);
          if (res.data.code == 1) {
            this.show = true;
            // this.backHandler()
          } else {
            Toast(res.data.msg);
          }
        })
        .catch((err) => {});
    },
  },
};
</script>

  <style scoped>
.van-popup {
  background-color: transparent !important;
}
.popup {
  width: 85vw;
  min-height: 200px;
  background-image: url(../../../assets/xyrybg.png);
  background-repeat: round;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 10px;
}
.van-cell {
  padding: 15px 16px;
  font-size: 15px;
}
.containt {
  max-height: 350px !important;
  min-height: 350px !important;
  /* height: auto; */
  background: #f2f3f7;
  background-image: url("../../../assets/my/gpdhBg.png");
  background-repeat: round;
}
body {
  background: white !important;
}
.back_box {
  background-color: transparent !important;
  -webkit-box-shadow: 0px 0px 6px 0px transparent !important;
  box-shadow: 0px 0px 6px 0px transparent !important;
}
.van-cell {
  background-color: #f8f7f7 !important;
}
</style>
<style scoped>
.back_box {
  background-color: transparent !important;
  -webkit-box-shadow: 0px 0px 6px 0px transparent !important;
  box-shadow: 0px 0px 6px 0px transparent !important;
  width: 100vw;
  height: 13.33vw;
  line-height: 13.33vw;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
}
.back_btn {
  width: 20vw;
  margin: 1.33vw 0 0 3vw;
  /* position: absolute; */
  /* left: 5.3vw; */
  /* top: 2.3vw; */
}
.back_btn img {
  width: 2.9vw;
  height: 5.8vw;
}
.back_text {
  font-size: 4.8vw;
  text-align: center;
  /* position: absolute; */
  /* right: 44vw; */
}
.back_text1 {
  font-size: 4.8vw;
  float: right;
  margin-right: 3vw;
  width: 20vw;
}
</style>
